<template>
  <div class="myTable">
    <!-- 条件查询 -->
    <div id="queryForm">
      <!-- 横向显示 -->
      <head-top></head-top>
      <el-form :inline="true" :model="paperQuery">
        <el-form-item label="试题名:">
          <el-col :span="18">
            <el-input
              v-model="paperQuery.name"
              placeholder="试题名查询"
              width="320"
            ></el-input>
          </el-col>
        </el-form-item>
        <el-form-item label="技术方向:">
          <el-col :span="15">
            <el-input
              class="a123"
              placeholder="技术方向查询(缺)"
              width="320"
            ></el-input>
          </el-col>
        </el-form-item>
        <el-form-item label="考试日期:">
          <el-col :span="18">
            <el-date-picker
              v-model="paperQuery.starttime"
              type="date"
              placeholder="考试时间"
            ></el-date-picker>
          </el-col>
        </el-form-item>
        <el-form-item>
          <el-button
            type="primary"
            icon="el-icon-search"
            @click="queryPaper"
            size="mini"
            >查询</el-button
          >
          <el-button
            type="danger"
            icon="el-icon-delete"
            @click="resetForm"
            size="mini"
            >清空</el-button
          >
          <el-button type="primary" @click="addExam()" size="mini"
            >增加</el-button
          >
        </el-form-item>
      </el-form>
    </div>
    <!-- 试题数据 -->
    <div class="page2">
      <el-table
        ref="multipleTable"
        :data="paperList"
        tooltip-effect="dark"
        style="width: 100%"
      >
      <el-table-column label="序号" width="70" align="center">
        <template scope="scope">{{ scope.$index + 1 }}</template>
      </el-table-column>
        <el-table-column  label="考试名称" prop="name"  align="center"> 
            <template slot-scope="scope">{{ scope.row.name}}</template>
        </el-table-column>
        <el-table-column label="技术方向" align="center"> </el-table-column>
        <el-table-column label="考试时长" prop="score" align="center"></el-table-column>
        <el-table-column prop="starttime" label="考试日期" align="center"> </el-table-column>
        <el-table-column label="操作" style="margin-left: 30px" align="center">
          <template>
            <el-button @click="handleClick()" type="text" size="small"
              >查看</el-button
            >
            <el-button type="text" size="small">编辑</el-button>
            <el-button
              @click.native.prevent="deletePaper(scope.row.id)"
              type="text"
              size="small"
            >
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <div class="block" >
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[5, 10, 50, 100]"
          :page-size="limit"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          
        >
        </el-pagination>
      </div>
    </div>
  </div>
</template>
  
<script>
import axios from "axios";
import headTop from "../../components/headTop.vue";
export default {
  data() {
    return {
      paperQuery: {},
      // 试题数据
      paperList: [],

      // 分页
      currentPage: 1, // 当前页
      total: 10, // 总记录数
      limit: 5, // 每页显示的记录数
    };
  },
  components: {
    headTop,
  },
  created() {
    this.paperSelect(this.currentPage, this.limit);
  },
  // 监听数据的变化
  watch: {
    $route(to, from) {
      // 路由变化的方式，路由发生变化，方法就会执行
      this.paperSelect(this.currentPage, this.limit);
    },
  },
  methods: {
    // 渲染试卷数据
    paperSelect(current, limit) {
      axios
        .post(
          `http://114.116.52.2:8008/testarrange/selectTestArrange/${current}/${limit}`,
          this.paperQuery
        )
        .then((res) => {
            console.log(res.data);
          this.paperList = res.data.rows;
          this.total = res.data.total;
        });
    },
    // 条件查询试题
    queryPaper() {
      this.paperSelect(this.currentPage, this.limit);
    },
    // 删除试题(根据id)
    deletePaper(id) {
      this.$confirm("此操作将永久删除该试题, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        axios
          .delete(
            `http://114.116.52.2:8008/testarrange/removeTestArrange/{id}/${id}`
          )
          .then((res) => {
            let code = res.data.code;
            if (code == 200) {
              this.$message({
                type: "success",
                message: "删除成功!",
              });
              this.paperSelect(this.currentPage, this.limit);
            }
          });
      });
    },
    //   清空查询
    resetForm() {
      this.paperQuery = {};
      this.paperSelect(this.currentPage, this.limit);
    },

    // 每页记录数发生变化
    handleSizeChange(val) {
      this.limit = val;
      this.paperSelect(1, this.limit);
    },
    // 当前页发生变化
    handleCurrentChange(val) {
      this.currentPage = val;
      this.paperSelect(this.currentPage, this.limit);
    },

    // 添加考试试题
    addExam() {
      this.$router.push("/addPaper");
    },
  },
};
</script>
  
<style scoped>
.myTable {
  width: 100%;
  height: 850px;
  /* margin: 15px auto; */
  text-align: center;
  overflow: hidden scroll;
}

.el-table .cell {
  text-align: center;
}

.el-table th > div {
  /* margin: 0 0px 0 16px; */
  width: auto;
}

.page2 th .cell {
  text-align: center;
}

.block {
  margin-top: 50px;
  float: left;
  margin-left: 5px;
}

.el-form.el-form--inline {
  float: left;
  margin: 0 0 0 0;
}

.el-button--mini {
  /* margin: 0 0 0 60px; */
}

.el-input--mini .el-input__inner {
  width: 160px;
}

.el-table th > .cell {
  text-align: center;
}

.el-table .cell,
.el-table th > div {
  padding-left: 0;
}

.el-input--mini .el-input__inner {
  width: 123px;
}

.el-input__icon.el-icon-time {
  margin: 0 15px 0 0;
}

.el-date-editor.el-input {
  width: 125px;
}

.el-form--inline .el-form-item {
  display: inline-block;
  margin-top: 18px;
  margin-left: 15px;
  vertical-align: top;
}

.el-col-15 {
  width: 79.5%;
}
</style>